// 这两个路由必须一直都加载好，所以不用改成路由懒加载的样子
import Vue from 'vue'
import VueRouter from 'vue-router'

// !elementUI引入的东西是给.vue组件使用的，所以在js文件里需要重新引入
// !而且不能用this.$message进行引用了，因为js里的this代表windw，但可以直接用Message调用，或者自己声明一个，把Message赋值给它，然后调用
import { Message } from 'element-ui'

/**
 *! 路由懒加载
 * 当打包项目后，js包会很大，因为所有js文件都合在一起，一起加载，这样网页速度就很慢
 * 那么我们将不同路由对应的组件分割成不同的代码块，这样打包后，只有当加载到那一块的时候，才加载对应组件，
 * 这样就能大大加快网页的打开速度
 *! 安装 开发依赖 @babel/plugin-sysntax-dynamic-import
 *! 然后在 babel.config.js 配置文件中声明该依赖
 *! 最后，将router文件中的路由引入格式按照 特定语法 改成 按需加载的形式
 */
// ? 因为改成路由懒加载了，所以这里的import引入就不用了
// import Login from '../components/Login.vue'
// import Home from '../components/Home.vue'
// import Welcome from '../components/Welcome.vue'
// import Users from '../components/user/Users.vue'
// import Rights from '../components/power/Rights.vue'
// import Roles from '../components/power/Roles.vue'
// import Cate from '../components/goods/Cate.vue'
// import Params from '../components/goods/Params.vue'
// import GoodsList from '../components/goods/List.vue'
// import Add from '../components/goods/Add.vue'
// import Order from '../components/order/Order.vue'
// import Report from '../components/report/Report.vue'

/**
 * 改为懒加载的模式
 * 通过不同的webpackChunkName进行路由组件的分割
 * 比如：Login Home Welcome路由的webpackChunkName名字均为login_home_welcome，它们三个为一组，
 * 加载的是时候就会这三个一起加载，而没有用到其他的组件的时候就不会加载其他的组件
 */
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')

const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue')
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')

const Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')

const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add.vue')

const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')

// 通过msg使用elementUI的message组件
var msg = Message

// ?. 这种route的写法我还不会，不理解
// !improt进来的名字是VueRouter，这里就得是VueRouter，要一样才行
Vue.use(VueRouter)

// !路由占位符<router-view></router-view>
/**
 * !我们设置的路由路径，是会根据我们在哪里写了路由占位符来决定在哪里加载对应的组件的
 *因为我们在App.vue页面中放了<router-view></router-view>，所以所有的页面都是在App.vue里面加载出来的
 比如访问/login页面的时候，Login组件就会被加载到App.vue页面中，
 访问/home页面时，Hoem.vue页面加载，但还是在App.vue页面里面加载
 * !同时，我们在Hoem.vue组件中的 右侧主体区域 也放了个路由占位符<router-view></router-view>
 * !那么就意味着， path: '/home' 下的 子路径 children: [{ path: '/welcome', component: Welcome }]
 * !会在Hoem.vue组件中的 右侧主体区域 的路由占位符中加载显示
 */
const routes = [
  // 重定向login地址，redirect: '/login' 重定向  当打开的网页以/结束，则自动跳转到/login路由
  { path: '/', redirect: '/login' },
  //  path: '/login' 表示当url访问/login的时候访问组件 component: Login 页面
  { path: '/login', component: Login },
  {
    path: '/home',
    component: Home,
    // 当访问/home的时候重定向到/welcome页面
    redirect: '/welcome',
    // 设置/home的子页面/welcome页面路径，访问/welcome时加载Welcome.vue组件
    children: [
      { path: '/welcome', component: Welcome },
      { path: '/users', component: Users },
      { path: '/rights', component: Rights },
      { path: '/roles', component: Roles },
      { path: '/categories', component: Cate },
      { path: '/params', component: Params },
      { path: '/goods', component: GoodsList },
      { path: '/add', component: Add },
      { path: '/orders', component: Order },
      { path: '/reports', component: Report }

    ]
  }
]

const router = new VueRouter({
  routes
})

// !路由守卫，用于确保用户已登录或者有权限访问要去的页面
router.beforeEach((to, from, next) => {
  // to  表示将要访问的路径
  // from  表示从哪个路径跳转来的
  // next  这是一个函数，表示放行，允许跳转
  // !next-->有两种方式，1.next()--->表示直接放行，到to要去的路径  2.next('/login')--->表示强制放行到指定页面，这里是强制跳转到login页面

  // 如果要去访问的路径是login，那就直接放行
  if (to.path === '/login') {
    return next()
  }
  // 要访问其他页面就得查看token值，有才能去访问，所以现在获取一下token的值
  const tokenStr = window.sessionStorage.getItem('token')
  // 如果token的值为空，代表没有登录，所以强制放行到登录页面
  if (!tokenStr) {
    msg.error('请先登录！')
    return next('/login')
  }
  // 以上情况都不是，那就表示token值存在，也就是登录了的，直接放行，想去哪都行
  next()
})

export default router
// ????
